<template>
  <picker
    class="pickerList"
    @change="pickerAccountChange"
    mode="selector"
    :range="newCategotyDataList"
    range-key="Display"
  >
    <text class="account">快捷标签</text></picker
  >
</template>

<script lang="ts" setup>
import { GetUserTagTypeAPI } from '@/services/login'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'

const goodType = ref('标签')
const newCategotyDataList = ref<string[]>([])

// 定义 props 接收数据
const query = defineProps<{
  UserName: string
  InOut: string
  Auth: string
}>()
const InitGetUserTagType = async () => {
  if (query.UserName) {
    const res = await GetUserTagTypeAPI({
      Auth: query.Auth,
      UserName: query.UserName,
      InOut: query.InOut == '收入' ? 1 : 2,
    })
    newCategotyDataList.value = []
    for (var i = 0; i < res.result.length; i++) {
      newCategotyDataList.value.push(res.result[i].TagName)
    }
  }
}
//选择账户
const pickerAccountChange = (e: any) => {
  goodType.value = newCategotyDataList.value[e.detail.value]
  emit('change', goodType.value)
}
onShow(async () => {
  console.log('Picker_触发tag onShow')
  await InitGetUserTagType()
})

const emit = defineEmits<{
  (event: 'change', goodType: string): void
}>()
</script>
<style scoped>
.account {
  height: 80rpx;
  margin: 0 10rpx;
  padding: 10rpx 20rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 60rpx;
  font-size: small;
  background-color: #fdc3bc;
}
.account:active {
  color: #686767;
}
</style>
